/* ==========================================================================
   Atlas layout

   The core stucture of all atlas layouts
========================================================================== */
@mixin layout-atlas() {
    .layout-atlas {
        // Toggle button
        .toggle-btn {
            & > img,
            & > .glyphicon,
            & > .mx-icon-lined,
            & > .mx-icon-filled {
                margin: 0;
            }
        }
        .toggle-btn > .mx-icon-lined {
            font-family: "Atlas_Core$Atlas";
        }

        .toggle-btn > .mx-icon-filled {
            font-family: "Atlas_Core$Atlas_Filled";
        }

        .mx-scrollcontainer-open {
            .expand-btn > img {
                transform: rotate(180deg);
            }
        }

        // Sidebar
        .region-sidebar {
            background-color: $navsidebar-bg;
            @if not $use-modern-client {
                z-index: 101;
            }
            box-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%);

            .mx-scrollcontainer-wrapper {
                display: flex;
                flex-direction: column;
                padding: $spacing-small 0;
            }

            .mx-navigationtree .navbar-inner > ul > li > a {
                padding: $spacing-medium;

                .glyphicon,
                .mx-icon-lined,
                .mx-icon-filled {
                    margin-right: $spacing-small;
                }
            }

            .sidebar-heading {
                background: $navsidebar-sub-bg;
            }

            .toggle-btn {
                margin-right: $spacing-small;
                border-color: transparent;
                border-radius: 0;
                background: transparent;
                padding: $spacing-medium;
            }
        }

        // Topbar
        .region-topbar {
            position: relative;
            z-index: 60; // Show dropshadow
            min-height: $topbar-minimalheight;
            background-color: $navtopbar-bg;

            // Topbar Content
            .topbar-content {
                display: flex;
                align-items: center;
                min-height: $topbar-minimalheight;
            }

            // Toggle btn
            .toggle-btn {
                padding: 0;
                margin-right: $spacing-medium;
                border-color: transparent;
                border-radius: 0;
                background: transparent;
            }

            // For your company, product, or project name
            .navbar-brand {
                display: inline-block;
                float: none; // reset bootstrap
                height: auto;
                padding: 0;
                line-height: inherit;
                font-size: 16px;
                margin-right: $spacing-small;

                img {
                    display: inline-block;
                    margin-right: $spacing-small;
                    @if $brand-logo !=false {
                        width: 0;
                        height: 0;
                        padding: ($brand-logo-height / 2) ($brand-logo-width / 2);
                        background-image: url($brand-logo);
                        background-repeat: no-repeat;
                        background-position: left center;
                        background-size: $brand-logo-width;
                    } @else {
                        width: auto;
                        height: $brand-logo-height;
                    }
                }

                a {
                    margin-left: $spacing-small;
                    color: $navbar-brand-name;
                    font-size: 20px;

                    &:hover,
                    &:focus {
                        text-decoration: none;
                    }
                }
            }

            .mx-navbar {
                display: inline-flex;
                vertical-align: middle;
                background: transparent;
                justify-content: center;
                align-items: center;

                & > .mx-navbar-item {
                    & > a {
                        margin-top: 5px;
                        padding: 0 20px;
                    }
                }
            }
        }

        @if (not $use-modern-client) {
            .mx-scrollcontainer-slide {
                &:not(.mx-scrollcontainer-open) > .region-sidebar {
                    overflow: hidden;
                }
            }
        }
    }
}
